<template>
    <div class="userlist">
        <el-table :data="data" stripe width="100" >
            <el-table-column prop="id" label="序号" width="250" />
            <el-table-column prop="realname" label="用户名" width="250" />
            <el-table-column prop="userid" label="用户ID" width="250" />
            <el-table-column prop="cdate" label="创建日期" width="250" />
            <el-table-column label="操作" width="250">
            <template #default>
                <el-button link type="primary" size="small" >用户授权</el-button>
            </template>
            </el-table-column>
        </el-table>
        
        <el-pagination background layout="prev, pager, next" :total="100" @current-change="changePage"/>
    </div>
</template>

<script setup lang="ts">
import type { UsersListType } from '@/typings/usersType'
interface IProps{
    data:UsersListType[]
    total:number
    loadData:(page:number) => void
}

const props = defineProps<IProps>()
const changePage = (page:number) => {
    props.loadData(page)
}
</script>

<style scoped>
.el-pagination{
    margin-top: 30px;
}
.userlist{
    margin: 20px;
}
.el-table tr {
    height: 100px;
}
</style>